<template>
  <div>
    <div class="toop">
      <div class="logo">
        <div class="logo_img">
          <div class="image">
            <img :src="loginlogo.pc_logo" alt="" />
          </div>
          <div class="text">{{ loginlogo.pc_name }}</div>
        </div>
        <div class="sousuo">
          <div class="inp">
            <input type="text" placeholder="搜索文章" @keydown.enter="mysearch" v-model="ss" />
            <!-- <router-link to="/search">About</router-link> -->
            <el-icon class="iconto" style="cursor: pointer" @click="mysearch">
              <Search />
            </el-icon>
          </div>
          <div class="login" @click="tuichu">
            <div class="hyn">欢迎你</div>
            <div>
              <img :src="moren" alt="" />
            </div>
            <div class="nick">{{ nickname }}</div>
            <div class="xiala">
              <el-icon v-if="flge">
                <ArrowDown />
              </el-icon>
              <el-icon v-else>
                <ArrowUp />
              </el-icon>
              <!-- <div @click.self="hideModal"> -->
              <div class="xlk" v-if="!flge" @click.self="hideModal">
                <li class="li1" @click="personage">个人中心</li>
                <li @click="tclogin">退出登录</li>
              </div>
              <!-- </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="block text-center">
      <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
      <el-carousel ref="carouselRef">
        <el-carousel-item v-for="(item, index) in lunbo" :key="index">
          <img :src="item.image" alt="" class="imagessss" />
        </el-carousel-item>
      </el-carousel>
      <!-- <div class="block text-center leftshang">
        <el-carousel>
          <el-carousel-item>
            11
          </el-carousel-item>
          <el-carousel-item>
            22
          </el-carousel-item>
        </el-carousel>
      </div> -->
      <!-- <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in lunbo" :key="index">
            <img :src="item.image" alt="" class="imagessss" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div> -->
    </div>
    <div class="menu_box">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router="true"
        :popper-offset="10" text-color="#fff">
        <el-menu-item index="/home/index">首页</el-menu-item>
        <!-- <el-menu-item index="">团队风采馆</el-menu-item> -->
        <el-sub-menu index="2">
          <template #title><span id="qqq">团队风采馆</span></template>
          <el-menu-item index="/home/team-t">支部风采</el-menu-item>
          <el-menu-item index="/home/team-d">党员风采</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/home/workbenck">党务工作台</el-menu-item>
        <el-menu-item index="/home/publicbar">党务公开栏</el-menu-item>
        <el-menu-item index="/home/alermbells">党纪警示钟</el-menu-item>
        <el-menu-item index="/home/msgboards">党员留言板</el-menu-item>
        <el-menu-item @click="big">党建大数据</el-menu-item>
        <!-- <el-menu-item @click="big"><router-link :to="{ path: '/pc/bigdata' }" replace>党建大数据</router-link></el-menu-item> -->
        <!-- <el-menu-item index="/event">党建大数据</el-menu-item> -->
      </el-menu>
    </div>
    <div class="box">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { rotation, Info, website } from '@/api/team'
// import Swiper from 'swiper'
const carouselRef: any = ref(null)
const intervalId = ref<ReturnType<typeof setInterval> | null>(null)

const autoplayInterval = 3000 // 3 秒自动轮播一次

onMounted(() => {
  if (carouselRef.value) {
    // 假设 Carousel 组件有一个 next() 方法来切换到下一个项目
    intervalId.value = setInterval(() => {
      carouselRef.value.next()
    }, autoplayInterval)
  }
})

onBeforeUnmount(() => {
  if (intervalId.value) {
    clearInterval(intervalId.value)
  }
})
// onMounted(() => {
//   if (defaultHoverElement.value) {
//     defaultHoverElement.value.classList.add('already-hovered');
//   }
// });
// onMounted(() => {
//   setTimeout(() => {
//     document.querySelector('.el-carousel__arrow--right').dispatchEvent(new MouseEvent('click'))
//   }, 1000)
// })
let Router = useRouter()
const big = () => {
  const timestamp = Date.now();
  sessionStorage.setItem('refreshTimestamp', timestamp.toString());
  // const url = `/pc/bigdata?refresh=${Date.now()}`
  const url = `/pc/bigdata`
  // window.open(url, '_blank')
  const newWindow: any = window.open(url, '_blank');
  newWindow.addEventListener('load', () => {
    newWindow.location.reload();
  });
  // location.reload();
  // Router.push('/bigdata').then(() => {
  //   window.location.reload();
  // });
}
let loginlogo = ref({
  pc_logo: '',
  pc_name: ''
})
const websites = () => {
  website().then(res => {
    loginlogo.value = res.data.data
    console.log(loginlogo.value, 'sssS')
  })
}
websites()
let Route = useRoute()
let lunbo = ref()
const ss: any = ref()
let type: any = ref({
  type: 1
})
watch(Route, () => {
  console.log(Route.fullPath, 'Route')
  //首页
  if (Route.fullPath == '/home/index') {
    type.value.type = 1
    rotations()
    //支部风采
  } else if (Route.fullPath == '/home/team-t') {
    type.value.type = 6
    rotations()
    //党员风采
  } else if (Route.fullPath == '/home/team-d') {
    type.value.type = 7
    rotations()
    //工作台
  } else if (Route.fullPath == '/home/workbenck') {
    type.value.type = 8
    rotations()
    //公开栏
  } else if (Route.fullPath == '/home/publicbar') {
    type.value.type = 9
    rotations()
    //警世钟
  } else if (Route.fullPath == '/home/alermbells') {
    type.value.type = 10
    rotations()
    //留言板
  } else if (Route.fullPath == '/home/msgboards') {
    type.value.type = 11
    rotations()
  } else if (Route.fullPath == '/home/study') {
    type.value.type = 2
    rotations()
  } else if (Route.fullPath == '/home/article') {
    type.value.type = 3
    rotations()
  } else if (Route.fullPath == '/home/frequency') {
    type.value.type = 4
    rotations()
  } else if (Route.fullPath == '/home/exam/exam/pai') {
    type.value.type = 5
    rotations()
  } else if (Route.fullPath == '/home/personage/centre') {
    type.value.type = 12
    rotations()
  }
})
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const rotations = () => {
  rotation(type.value).then(res => {
    console.log(res.data.data, 'img')
    lunbo.value = res.data.data
    // setTimeout(initSwiper, 10)
  })
}
rotations()
let nickname = ref()
let moren = ref()
const geren = () => {
  Info().then(res => {
    console.log(res.data.data.nickname, 'kasjksadd')
    nickname.value = res.data.data.nickname
    moren.value = res.data.data.avatar
  })
}
geren()
function personage() {
  Router.push('/home/personage/centre')
}
let flge = ref(true)
const tuichu = () => {
  flge.value = !flge.value
}
const tclogin = () => {
  localStorage.removeItem('nickname')
  localStorage.removeItem('avatar')
  localStorage.removeItem('token')
  localStorage.removeItem('position')
  Router.push('/login')
}
const activeIndex = ref('1')
const hideModal = () => {
  console.log(1)
  flge.value = false
}

function mysearch() {
  Router.push({ path: '/search', query: { ss: ss.value } })
}
// const initSwiper = () => {
//   new Swiper('.swiper-container', {
//     // loop: true,
//     autoplay: {
//       delay: 3000 // 设置自动切换的时间间隔，单位为毫秒
//     },
//     pagination: {
//       el: '.swiper-pagination',
//       clickable: true
//     },
//     navigation: {
//       nextEl: '.swiper-button-next',
//       prevEl: '.swiper-button-prev'
//     }
//   })
// }
</script>

<style lang="scss">
.el-menu--horizontal>.el-menu-item.is-active {
  background-color: #f39d9d9d !important;
  color: #fff !important;
}

//团队风采关标题滑动
.el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover {
  background-color: #e02020 !important;
}

.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
  color: #fff !important;
  // font-size: 18px !important;
}

.el-menu--horizontal.el-menu {
  border-bottom: none !important;
}

.el-menu--popup-bottom-start li {
  width: 100% !important;
  color: #fff !important;
  background: transparent !important;
}

.el-menu--popup-bottom-start {
  background: #e02020ad;
  // width: 50px !important;
}

// ::v-deep .el-menu--popup-bottom-start {
//   width: 50px !important;
// }

.el-menu .el-menu--inline li {
  width: 100% !important;
  color: #666 !important;
}

.el-menu {
  border-right: none !important;
}

// .el-menu .el-menu--inline li:hover {
//   width: 100% !important;
//   color: #e02020 !important;
// }

// .el-menu--popup-bottom-start li:nth-child(1) {
//   border-bottom: solid 2px #fff !important;

// }

// .el-menu--popup-bottom-start {
//   // background: #da070782 !important;

// }
// .el-menu el-menu--horizontal el-menu-demo
// style attribute {
//   --el-menu-text-color: #fff;
//   --el-menu-hover-text-color: #fff;
//   --el-menu-level: 0;
// }

:root {
  --el-color-primary-light-9: rgba(224, 32, 32, 0);
  --el-menu-active-color: rgba(224, 32, 32, 0.1);
  // --el-menu-hover-text-color: #eb60609d;
  // --el-menu-hover-text-color: #E02020;
  // --el-text-color-primary: #E02020
  --el-color-primary: #e02020;
  // --active-color: #ff0
  // --bg-color: #ff0
}

// .qqq:hover {
//   background-color: #eb60609d !important;
//   color: #fff !important;
// }</style>

<style lang="scss" scoped>
#qqq {
  font-size: 18px !important;
}

.el-menu-item {
  text-align: center;
  width: 154px !important;
  font-size: 18px !important;
}

// .el-menu:nth-child(1) {
//   margin-left: 20px;
// }

.butt {
  background: #e02020;
  width: 70px;
  height: 30px;
  border: none;
  position: absolute;
  bottom: 15px;
  right: 15px;
}

.nei_title {
  height: 662px;
  margin-left: 20px;
  margin-right: 20px;
}

.text_title {
  display: flex;
  justify-content: space-between;

  h4 {
    width: 370px;
  }
}

.p1 {
  margin-top: 25px;
  line-height: 25px;
  color: #999999;
  height: 72px;
  display: -webkit-box;
  /* 将元素视为块级盒子 */
  -webkit-line-clamp: 3;
  /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  /* 设置文本排列方向为垂直 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 超出部分用省略号表示 */
}

.zhe {
  width: 100%;
  height: 100%;
  background: #000000a0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;

  .zhao {
    width: 608px;
    background: #fff;
    padding: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -304px;
    margin-top: -250px;
    position: relative;
  }
}

@media (min-width: 2160px) {
  .el-menu-demo {
    // display: flex;
    width: 70%;
    margin: 0 auto;
    justify-content: center;
    background: #e02020;
  }

  .box {
    width: 100%;
    height: 1296px;
    margin: 0 auto;
    // background: #dcdadafb;
    position: relative;
  }
}

.menu_box {
  background: #e02020;

  // text-align: center;
}

// .el-menu {
//   // text-align: center !important;
//   margin-left: 410px !important;
//   margin-right: 400px !important;
// }

@media (max-width: 2159px) {
  .el-menu-demo {
    // display: flex;
    // width: 1080px;
    justify-content: center;
    // margin: 0 auto;
    background: #e02020;
  }

  .box {
    width: 100%;
    // height: 100vh;
    background-color: #f5f5f5;
    margin: 0 auto;
    position: relative;
  }
}

// .demonstration {
//   color: var(--el-text-color-secondary);
// }

// .el-menu-item {
//   flex: 1 !important;
// }

// .el-carousel__item h3 {
//   color: #475669;
//   opacity: 0.75;
//   line-height: 150px;
//   margin: 0;
//   text-align: center;
// }

// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }

.logo {
  display: flex;
  width: 100%;
  // margin: 0 auto;
  justify-content: space-between;
  // justify-content: space-around;
  height: 50px;

  .logo_img {
    // width: 40%;
    width: 410px;
    font-size: 14px;
    display: flex;
    // width: 25%;
    line-height: 50px;
    margin-left: 10%;

    .text {
      color: red;
      font-weight: 800;
      font-size: 18px;
    }

    .image {
      width: 40px;
      height: 40px;
      margin: 0 1vh;
      // margin-left: 5%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .sousuo {
    // width: 50%;
    // width: 30%;
    width: 660px;
    margin-right: 10%;
    display: flex;
    justify-content: right;
    // flex: 10;
    font-size: 14px;

    .inp {
      // width: 40%;
      width: 263px;
      height: 30px;
      margin-right: 5%;
      position: relative;
      margin-top: 10px;
    }

    input {
      width: 100%;
      height: 30px;
      border: none;
      border-radius: 25px;
      background: #f5f5f5;
      text-indent: 20px;
      font-size: 14px;
    }

    input::placeholder {
      // margin-left: 20px;
      text-indent: 20px;
    }

    .iconto {
      position: absolute;
      right: 3%;
      top: 8px;
      color: red;
    }

    .login {
      // width: 50%;
      display: flex;
      height: 50px;
      line-height: 50px;
      cursor: pointer;
      color: #9e9e9e;

      .hyn {
        // margin: 0 20px;
        margin-right: 10px;
        width: 48px;
        font-size: 16px;
      }

      .nick {
        margin: 0 10px;
      }

      // div {
      //   margin-right: 2%;
      //   margin-left: 2%;
      // }

      img {
        width: 40px;
        height: 40px;
        margin-top: 2px;
        border-radius: 50%;
      }
    }
  }
}

// .logo {
//   width: 100%;
//   height: 50px;
//   background: olive;
//   line-height: 50px;
//   display: flex;

//   .logo_img {
//     // width: 40%;
//     font-size: 14px;
//     display: flex;
//     // width: 25%;
//     line-height: 50px;
//     margin-left: 10%;

//     .text {
//       color: red;
//       font-weight: 800;
//       font-size: 18px;
//     }

//     .image {
//       width: 40px;
//       height: 40px;
//       margin: 0 1vh;
//       // margin-left: 5%;

//       img {
//         width: 100%;
//         height: 100%;
//       }
//     }
//   }
//   .sousuo{
//     img{

//     }
//   }
// }

.xiala {
  position: relative;
  cursor: pointer;
}

.xlk {
  width: 157px;
  height: 110.5px;
  background: #fff;
  position: absolute;
  top: 40px;
  right: -80px;
  z-index: 9999;
  border-radius: 15px;
  border: 2px solid #666;

  // box-shadow: 1px 1px 1px 1px #666;
  li {
    list-style: none;
    text-align: center;
    height: 55px;
    // background: #475669;
  }

  li:hover {
    color: #e02020;
    cursor: pointer;
  }

  .li1 {
    border-bottom: solid 2px #ccc;
  }
}

@media (min-width: 1081px) {
  ::v-deep .el-carousel__container {
    width: 100%;
    height: 420px !important;
  }

  .swiper-container {
    width: 100% !important;
    height: 420px !important;
  }

  .swiper-slide {
    width: 100% !important;
    height: 420px !important;
  }

  .el-carousel__item {
    width: 100%;
  }

  .imagessss {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 1080px) {
  ::v-deep .el-menu {
    width: 1080px !important;
    justify-content: center;
  }

  // .el-menu-item {
  //   text-align: center;
  //   width: 124px !important;
  //   font-size: 18px !important;
  // }
}

@media (min-width: 1081px) {
  ::v-deep .el-menu {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 1080px) {
  ::v-deep .el-carousel__container {
    width: 1080px !important;
    height: 420px !important;
  }

  .swiper-container {
    width: 1080px !important;
    height: 420px !important;
  }

  .swiper-slide {
    width: 1080px !important;
    height: 420px !important;
  }

  .el-carousel--horizontal {
    width: 1080px !important;
  }

  .el-carousel__item {
    width: 1080px !important;
  }

  .imagessss {
    width: 1080px !important;
    height: 100%;
    object-fit: cover;
    // height: 420px;
  }
}

.toop {
  background-color: #fff;
}
</style>
